<template>
  <div class="tradeContainer">

    <!-- 头部导航栏 -->
    <div class="header">
      <van-nav-bar fixed title="网易严选" left-text="返回">
        <template #left>
          <router-link to="/home">
            <van-icon name="wap-home-o" size='30px' />
          </router-link>

        </template>
        <template #right>

          <van-icon name="search" size="30" />
          <router-link to="/cart">
            <van-icon name="cart-circle-o" dot=true size="30" />
          </router-link>
        </template>
      </van-nav-bar>

    </div>

    <!-- 地址  -->
    <!--      disabled-text="以下地址超出配送范围"  -->
    <div class="address">
      <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
    </div>
  </div>

  <!-- 可切换的地方 -->
  <div>
    <!-- 优惠卷 -->
    <div>
      <!-- 优惠券单元格 -->
      <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
      <!-- 优惠券列表 -->
      <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
        <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons" @change="onChange" @exchange="onExchange" />
      </van-popup>
    </div>

    <!--商品合计 -->
    <div class="addPrice">
      <div class="item">
        <div class="name">商品合计</div>
        <div class="price"> ￥{{totoalPrice}}</div>
      </div>
    </div>

    <!-- 商品详情跳转 -->
    <div class="goodsList">
      <div class="goodsTitle">
        <span>包裹1</span> 受大促销影响，预计1-4天发货
      </div>
      <van-card v-for="(goods,index) in goodsList" 
      :key="goods.id"
      :num="goods.skuNum" 
      tag="标签" 
      :price="goods.orderPrice*goods.skuNum" 
      desc="描述信息" 
      :title="goods.skuName" 
      :thumb="goods.imgUrl" 
      origin-price="10.00" />
    </div>

    <!-- 网易严选服务协议 -->
    <van-radio-group v-model="checked" class="agreement">
      <van-radio name="1" shape="square">
        <div>我已同意<a href="https://m.you.163.com/help/new#/37/70">《网易严选服务协议》</a></div>
      </van-radio>

    </van-radio-group>

    <!-- 提交订单 -->
    <van-submit-bar  button-text="提交订单" @click="onSubmit" />
  </div>

  <van-overlay :show="show">
    <div class="wrapper">
      <img :src="qrCodeImg" class="block">
    </div>
  </van-overlay>

  <!-- <Adders></Adders> -->
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Trade',
});
</script>

<script lang="ts" setup>
import QRCode from 'qrcode'
import { ref ,onMounted} from 'vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
import {reqGetPayQRcode, reqPayStatus,reqTradeInfoData,reqSubmitTradeOrder} from "../../api/shopCart"

const router = useRouter()

// 订单商品相关
const goodsList = ref([])
const totoalPrice = ref()
const tradeNo = ref()

// 地址相关
const tel = ref('18729326666');
const name = ref('王冠晰');
const onEdit = () => Toast('edit');

// 优惠卷相关
const coupon = {
  available: 1,
  condition: '无门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
}
const showList = ref(false);
const coupons = ref([coupon])
const chosenCoupon = ref(-1);

//严选服务协议
const checked = ref() 

// 二维码相关
const show = ref(false);
const qrCodeImg = ref('')

// 假数据 订单信息
const tradeInfo = {
      consignee:"王冠晰",
      consigneeTel:"18729326666",
      deliveryAddress:"西安市",
      paymentWay:"ONLINE",
      orderComment:'',
      orderDetailList:[],
  };

onMounted(async() => {
    const res:any = await reqTradeInfoData()
    goodsList.value = res.detailArrayList
    totoalPrice.value = res.totalAmount
    tradeNo.value = res.tradeNo
    tradeInfo.orderDetailList = res.orderDetailVoList[0].orderDetailList
})


// 提交订单点击事件
const onSubmit = async() =>{
  const orderId = await reqSubmitTradeOrder(tradeNo.value,tradeInfo);
  show.value = true
  const res = await reqGetPayQRcode(orderId);
  QRCode.toDataURL(res.codeUrl).then(url=>{
    qrCodeImg.value = url
  // 事件轮询 不断查询此订单是否支付成功了 每间隔一段时间就去查询一次，所以要使用定时器
    const timer = setInterval(async ()=>{
    const res = await reqPayStatus(orderId)
    // 如果成功 就跳转到成功支付页面
        show.value= false;
        Toast.success('支付成功！')
        clearInterval(timer)
        router.push('/home')
      },1000)
    });
  }
</script>

<style lang='less' scoped>
.tradeContainer {
  .header {
    .van-nav-bar__title.van-ellipsis {
      font-weight: bold;
    }
  }
  .address {
    margin: 50px 0 10px 0;
  }
}
.addPrice {
  margin: 10px 0;
  font-size: 12px;

  .item {
    background-color: #fff;
    border-bottom: 1px solid #aaa;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
  }
}
.goodsList {
  padding: 10px;
  background-color: #fff;
  .goodsTitle {
    font-size: 10px;
    color: #aaa;
    span {
      font-size: 14px;
      color: black;
      margin-right: 4px;
    }
  }
}
.agreement {
  margin: 10px 0 0 10px;
  font-size: 12px;
  color: #999;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>